<template>
	<view class="body">
		<!-- 搜索框 -->
		<view class="search">
			<input type="text" placeholder="输入需要搜索的内容" class="findinput" >
			<image src="../../../static/search.png" class="img"></image>
			</input>
		</view>
		<!-- 订单 -->
		<view style="position: absolute; top: 10vh;left: 2.5%;">
			<view class="select">
				<text>共3条</text>
				<view class="select-two">
		      <uni-data-select
			  style="position: absolute; right: 0;top: -20rpx;"
		        v-model="value"
		        :localdata="range"
		        :clear="false">
				</uni-data-select>
				</view>
				</view>
		<view class="orderlist">
			<view class="list-one">
		<text>订单编号:2021010831213 </text>
		<text style="color: red; text-align:right;">￥500</text>
		</view>
		<view class="br"></view>
		<view class="list-two">
			<text>下单用户:张三丰</text>
			<view style="margin-top: 15rpx;"></view>
			<text >预约时间:2023-03-10 11:09:10</text>
			<view style="margin-top: 15rpx;"></view>
			<text >服务项目:宝马x5加装轮、清洁车辆、汽车美容</text>
		</view>
		<view class="br"></view>
		<view class="list-one">
			<text>下单时间:2022-10-12 11:09</text>
			
			<button @click="orderDl()" type="default" size="mini" style="background-color: #3082fa;color: white;border-radius: 50rpx 50rpx 50rpx 50rpx;margin-right: 0;">查看详情</button>
		
		</view>
		</view>
		
	<view class="orderlist">
		<view class="list-one">
	<text>订单编号:2021010831213 </text>
	<text style="color: red; text-align:right;">￥500</text>
	</view>
	<view class="br"></view>
	<view class="list-two">
		<text>下单用户:张三丰</text>
		<view style="margin-top: 15rpx;"></view>
		<text >预约时间:2023-03-10 11:09:10</text>
		<view style="margin-top: 15rpx;"></view>
		<text >服务项目:宝马x5加装轮、清洁车辆、汽车美容</text>
	</view>
	<view class="br"></view>
	<view class="list-one">
		<text>下单时间:2022-10-12 11:09</text>
		<button type="default" size="mini" style="background-color: #3082fa;color: white;border-radius: 50rpx 50rpx 50rpx 50rpx;margin-right: 0;">查看详情</button>
	</view>
	</view>
		
		
	</view>
	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				range: [
				        { value: 0, text: "待服务" },
				        { value: 1, text: "已完成" },
				    
				      ],
			}
		},
		methods: {
			orderDl(){
				uni.navigateTo({
					url:"/pages/order/orderDetails/orderDetails"
				})
			}
		}
	}
</script>

<style >
.body{
	margin: 0;
	padding: 0;
	background-color: #f6f6f6;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}
.search{
	width: 100vw;
	height: 20vh;
	background-color: #3082fa;
	padding-top: 1vh;
	position: relative;

	
}
.findinput{
	width: 87%;
	height: 30%;
	margin: 0 auto;
	padding-left: 3%;
	border-radius: 50rpx 50rpx 50rpx 50rpx;
	background-color: #f6f6f6;
	position: relative;
	font-size: 25rpx;
	color: #d0d0d0;
}
.img{
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	top: 13%;
	right: 10%;
}
.select-two{
	
	width: 150rpx;
	position: relative;
	/* border: 1rpx solid yellow; */
}
.uni-select {
	border: none !important;
	
}
.uni-select__input-text{
	color: white !important;
	width: 100rpx !important;
	text-align: left !important;
	/* border: 1rpx solid red !important; */
	
}
.uni-icons{
	color: white !important;
	
}
.select{
	height: 3vh;
	width:90vw;
	margin-left: 20rpx;
	display: flex;
	justify-content: space-between;
	
}
.select>text{
	color: white;
	font-size: 27rpx;
}
.orderlist{
	
	padding-top: 1vh;
	padding-bottom: 1vh;
	background-color: white;
	width: 95vw;
	height: auto;
	margin-top: 20rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	box-shadow: 3rpx 3rpx 3rpx 2rpx rgba(0, 0, 0, 0.2);
	
}
.list-one{
	margin-left: 5vw;
	margin-right: 5vw;
	font-size: 27rpx;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}
	.br{
		width: 95%;
		height: 1rpx;
		background-color:#efeff5 ;
		margin: 10rpx auto;
	}

.list-two>text{
	margin-left: 5vw;
	font-size: 27rpx;
	font-weight: bold;
}

</style>
